<template>
	<div class="useHowList">
		<el-card shadow="hover">
			<div class="use-how-list-search mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="12">
							<el-form-item prop="productCategoryId" label="分类">
								<CateSelector v-model="searchForm.productCategoryId" />
							</el-form-item>
							<el-form-item>
								<div>
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" style="text-align: right">
							<el-button type="success" @click="onOpenAdd">添加使用方法</el-button>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" table-layout="auto" style="width: 100%" height="480" class="sku_table">
				<el-table-column type="selection" width="55" />
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="分类名称" show-overflow-tooltip />
				<el-table-column prop="productId" label="视频地址" show-overflow-tooltip />
				<el-table-column prop="skuCode" label="图片地址" width="90" show-overflow-tooltip />
				<el-table-column label="操作" width="240px">
					<template #default="scope">
						<el-button text @click="toEdit(scope.row)" type="primary">编辑</el-button>
						<el-popconfirm title="请确认是否删除？" @confirm="delItem(scope.row.id)">
							<template #reference>
								<el-button text :disabled="scope.row.publishStatus === 1" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog title="添加使用方式" v-model="isShowModal" width="769px" destroy-on-close>
			<AddForm ref="AddForRef" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelCustomer" size="default">取消</el-button>
					<el-button type="primary" @click="onSubmitCustomre(customerModalRef)" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="UseHow">
import CateSelector from '/@/components/common/CateSelector.vue';
import AddForm from './component/addForm.vue';

const AddForRef = ref();
const isShowModal = ref(false);
const tableData = ref([]);
const formDataRef = ref();
const searchForm = ref({});
const page = ref({
	current: 1,
	pageSize: 10,
	total: 0,
});

const init = () => {};
function resetForm() {
	formDataRef.value.resetFields();
}

const onOpenAdd = () => {
	isShowModal.value = true;
};
const onCancelCustomer = () => {
	isShowModal.value = false;
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
};

// 页面加载时
onMounted(() => {});
</script>
<style lang="scss" scoped></style>
